<script setup lang="ts">

import {Folder} from "@element-plus/icons-vue";
import {ref} from "vue";
import {ElMessage, UploadInstance, UploadProps, UploadRequestOptions} from "element-plus";
import apis from "../http/apis.ts";
import {sendFileMessage} from "../actions/send_file_message.ts";
const upload = ref<UploadInstance>()
const submitUpload = (options: UploadRequestOptions) => {
  const formData = new FormData();
  formData.append('file', options.file);
  apis.uploadFile(formData).then(res => {
    sendFileMessage(res);
    ElMessage.success('Upload Success')
  }).catch(err => {
    console.log(err)
    ElMessage.error('Upload Failed')
  });
}
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  console.log(files.length,"--", uploadFiles.length)
  upload.value!.clearFiles();
  ElMessage.warning(
      `The limit is 1, you selected ${files.length} files this time, add up to ${
          files.length + uploadFiles.length
      } totally`
  )
}
</script>

<template>
  <el-upload
      ref="upload"
      style="display: flex"
      class="upload-demo"
      :limit="1"
      :show-file-list="false"
      :on-exceed="handleExceed"
      :http-request="submitUpload"
  >
    <template #trigger>
      <el-icon type="file" :size="20" style="cursor: pointer">
        <Folder/>
      </el-icon>
    </template>
  </el-upload>
</template>

<style scoped>

</style>